<template>
	<view class="container">
		<view class="address-list">
			<view class="a-address" v-for="(item,index) in addressList" :key="index">
				<view class="left-text" :class="item.isDefault? 'active':''" @tap="selectTap(item.id)">
					<view class="name-tel">
						{{item.linkMan}} {{item.mobile}}
					</view>
					<view class="address-box">
						{{item.address}}
					</view>
				</view>
				<navigator class="right-edit" url="/pages/ucenter/address_edit"></navigator>
			</view>
		</view>
		<navigator class="bottom-box" url="/pages/ucenter/address_edit">新增收货地址</navigator>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: [{
						id: 1,
						linkMan: '小明',
						mobile: '180 0797 1768',
						address: '北京市西城区动物园'
					},
					{
						id: 2,
						linkMan: '小红',
						mobile: '180 0797 1768',
						address: '北京市海淀区植物园',
						isDefault:true
					},
					{
						id: 3,
						linkMan: '小刚',
						mobile: '180 0797 1768',
						address: '广东省广州长隆动物园'
					}
				]
			}
		},
		onLoad() {
			
		},
		methods: {
			selectTap(id) {
				console.log("tap item id:" + JSON.stringify(id));
			},
			editAddess(id) {
				console.log("edit item id:" + id);
			},
			addAddess() {
				console.log("tap add new Address");
			}
		}
	}
</script>

<style lang='scss'>
	.container { background-color:#F4f4f4; }
	.address-list { width:100%; background-color:#fff; padding-bottom:100upx; }
	.address-list .a-address { width:720upx; margin-left:30upx; display:flex; justify-content:space-between; align-items:center; padding:20upx 0; border-bottom:1upx solid #eee; }
	.a-address .left-text { width:610upx; box-sizing:border-box; padding-left:58upx; }
	.a-address .left-text.active {
		background: url() no-repeat left center;
		background-size:32upx auto;
	}
	.a-address .left-text .name-tel { font-size:$font-lg; }
	.a-address .left-text .address-box { font-size:24upx; color:#888888; line-height:36upx; }
	.a-address .right-edit {
		width:109upx; height:100%; padding:50upx 0 50upx 58upx; box-sizing:border-box;
		background:url() no-repeat 43upx center;
		background-size:35upx auto;
	}
	.bottom-box { position:fixed; width:100%; bottom:0; font-size:$font-lg; color:#ffffff; border-top:1upx solid #eee; text-align:center; line-height:100upx; height:100upx; line-height:100upx; background:#8c0027; }
</style>
